<template>
  <div>
    <p flex justify-center>
      <label w-80px for="name">用户名</label>
      <input id="name" type="text" v-model="username" autocomplete="off" />
    </p>
    <p flex justify-center>
      <label line-block w-80px for="age">密码</label>
      <input id="age" type="password" v-model="password" autocomplete="off" />
    </p>
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script lang="ts" setup>
import { loginApi } from "/@/api/user";
import { useUserStore } from "/@/stores/user";

const user = useUserStore();
const router = useRouter();

const username = ref<string>("");
const password = ref<string>("");

const info = user.getUserInfo;

if (info.username) {
  router.push("/user");
}

const handleSubmit = () => {
  if (username && password) {
    loginApi({ username: username.value, password: password.value }).then(
      (res: any) => {
        user.setToken(res.token); // 设置 token
        user.setUserInfo({
          username: res.username,
          usersex: res.usersex,
          userage: res.userage
        });
        router.push("/user");
      }
    );
  }
};
</script>
